<template>
  <div id="app">
    <!--        header-->
    <div style="height: 60px;line-height: 60px;background: white;margin-bottom: 2px">
      <div style="position: fixed">
        <img src="@/assets/img.png" style="width: 40px;position: relative;left: 20px;top:10px;border-radius: 15%;"/>
        <span style="margin-left: 35px;font-size: 24px">知世就是力量</span>
      </div>

      <div style="position: relative;text-align: right">

        <el-popover
            placement="bottom-end"
            trigger="hover"
            v-if="Object.keys(admin).length">
          <div style="display: flex">
            <img src="../assets/logo.png" height="200" width="200"/>
            <el-descriptions title="管理员信息" style="width: 225px;margin-left: 25px;" column="1">
              <el-descriptions-item label="名字">{{ admin.name }}</el-descriptions-item>
              <el-descriptions-item label="ID">{{ admin.id }}</el-descriptions-item>
              <el-descriptions-item label="管理员码">{{ admin.admincode }}</el-descriptions-item>
              <el-descriptions-item label="手机号">{{ admin.phone }}</el-descriptions-item>
              <el-descriptions-item label="邮箱">{{ admin.email }}</el-descriptions-item>
            </el-descriptions>
          </div>


          <el-divider></el-divider>

          <span style="color: gray;">Hi~ 你好，管理员：
            <el-tooltip effect="dark" content="点击可以退出登录" placement="bottom">
            <el-link :underline="false" type="info" @click="loginOut">
            <strong style="text-decoration: underline; ">{{ admin.name }}</strong>
            </el-link>
            </el-tooltip>
            &nbsp;(๑╹ヮ╹๑)ﾉ Studying makes me happy !</span>
          <el-button slot="reference" circle style="background-color:transparent;border: 0">
            <el-avatar><img src="@/assets/logo.png"/></el-avatar>
          </el-button>
        </el-popover>
        <el-popover
            placement="bottom-end"
            trigger="hover"
            v-else>
            <el-card shadow="hover" @click.native="$router.push('/login')">
            <span style="color: gray;">Hi~ 你现在是
          <strong style="text-decoration: underline;">游客</strong>，点击登录吧~
        </span>
            </el-card>
          <el-button slot="reference" circle style="background-color:transparent;border: 0">
            <el-avatar>登录</el-avatar>
          </el-button>
        </el-popover>


      </div>
    </div>

    <!--    aside&main-->
    <div style="display: flex;min-height: calc(100vh - 62px)">
      <!--      aside-->
      <div style="width: 200px;overflow: hidden;background: white;margin-right: 2px">
        <el-menu :default-active="$route.path" router class="el-menu-demo">

          <el-menu-item index="/home">
            <template slot="title">
              <i class="el-icon-loading"></i>
              <span>主控</span>
            </template>
          </el-menu-item>

          <el-submenu index="/user">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>用户</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/user">用户列表</el-menu-item>
              <el-menu-item index="/addUser">用户扩增</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="/admin">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span>管理员</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/admin">管理员列表</el-menu-item>
              <el-menu-item index="/addAdmin">管理员扩增</el-menu-item>
            </el-menu-item-group>
          </el-submenu>


          <el-menu-item index="/about">
            <i class="el-icon-phone-outline"></i>
            <span>关于</span>
          </el-menu-item>

        </el-menu>


      </div>
      <!--      main-->
      <div style="flex: 1;background: #ffffff">
        <router-view/>
      </div>
    </div>

  </div>
</template>

<script>
import Cookie from "js-cookie";

export default {
  name: "layout",

  data() {
    return {

      admin: Cookie.get('admin') ? JSON.parse(Cookie.get('admin')) : {}
    }
  },
  methods: {
    loginOut() {
      //  清除登录的cookies
      Cookie.remove('admin')

      this.$router.push('/login')
      this.$message.success("退出成功")

    }
  }

}
</script>

<style scoped>

</style>